import { defineComponent, Suspense } from "vue";
import Header from "./Header.vue";
import Footer from "./Footer";
import LoadingPage from "./LoadingPage";
import { RouterView } from "vue-router";

export default defineComponent({
  name: "WithHeaderWithFooter",
  setup(_, { slots }) {
    return () => (
      <div class="layout-box">
        <Header />
        <Suspense>
          {{
            default: () => <RouterView />,
            fallback: () => <LoadingPage height="100vh" />,
          }}
        </Suspense>
        <div class="footer-box">
          <Footer />
        </div>
      </div>
    );
  },
});
